<template>
  <div>
      <Msgtop />
      <p class="Mtop">2017年06月20日10：44</p>
      <div class="Mmain">
          <p class="Mmaintop">新品推荐</p>
          <div class="Mmaincenter">
              <img class="Mmainleft" src="../../assets/user/msg1.png" alt="">
              <p class="Mmainright">新品上市啦！时间不多了，赶紧行动起来吧！</p>
          </div>
          <p class="Mmainbot">
              查看更多
              <i class="Mmainicon"></i>
          </p>
      </div>

      <p class="Mtop1">2017年06月20日11:12</p>
      <div class="Mmain">
          <p class="Mmaintop">安全提醒</p>
          <div class="Mmaincenter1">
              <img class="Mmainleft" src="../../assets/user/msg2.png" alt="">
              <div class="Mmainright">
                  <p>近期有不法分子冒充阿拉灯客服进行诈骗，请认准阿拉灯官方客服电话</p>
                  <p>4000123456</p>
              </div>
          </div>
      </div>

      <p class="Mtop1">2017年06月20日11:12</p>
      <div class="Mmain">
          <p class="Mmaintop">收货啦</p>
          <div class="Mmaincenter1">
              <img class="Mmainleft" src="../../assets/user/msg3.png" alt="">
              <p class="Mmainright">你的货物到站了，请注意查收哦~</p>
          </div>
      </div>
  </div>
</template>

<script>
import Msgtop from '../ma/Msgtop'
export default {
    name:'Msg',
    components:{
        Msgtop
    }
}
</script>

<style  scoped>
* {
    font-size: 2.8rem;
    color: #808080;
}
.Mtop {
    margin-top: 9.6rem;
    height: 8.9rem;
    line-height: 8.9rem;
}
.Mtop1 {
    height: 8.9rem;
    line-height: 8.9rem;
}
.Mmain {
    margin: 0 2rem;
    background: #fff;
    border: 0.1rem solid #ccc;
    border-radius: 2rem;
    /* height: 23.8rem; */
    text-align: left;
    padding: 0 2.5rem;
}
.Mmaintop {
    font-size: 3rem;
    color: #6e6e6e;
    height: 7.8rem;
    line-height: 7.8rem;
    padding: 0 0.9rem;
}
.Mmaincenter {
    display: flex;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2rem;
}
.Mmaincenter1 {
    display: flex;
    padding-bottom: 2rem;
}
.Mmainleft {
    margin:0 2rem ;
}
.Mmainright {
    margin-right: 1rem;
}
.Mmainbot {
    height: 7.9rem;
    line-height: 7.9rem;
    padding: 0 0.9rem;
    position: relative;
}
.Mmainicon {
    width: 1.6rem;
    height: 1.6rem;
    border: 0.2rem solid #ccc;
    position: absolute;
    right: 1rem;
    top: 2.7rem;
    transform: rotate(45deg);
    border-left-color: transparent;
    border-bottom-color: transparent;
}
</style>